<%--
  Created by IntelliJ IDEA.
  User: GGDog
  Date: 2023/6/9
  Time: 20:40
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>新增水库</title>
  <style type="text/css">
    @import "css/bootstrap-css/bootstrap.min.css";
    @import "css/login.css";
  </style>
  <script src="js/bootstrap-js/jquery.min.js"></script>
  <script src="js/bootstrap-js/bootstrap.min.js"></script>

  <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
  <script type="text/javascript">
    function checkNameAjax(){

      $.ajax({
        //发送请求的地址
        url:"CheckDamNameServlet",
        //请求方式，默认为get
        type:"post",
        //预期服务器返回的数据类型。如果不指定自动根据MIME类型返回信息
        dataType:"text",
        //发送到服务器的数据，与第26行可选
        data:{
          name:$("#name").val()
        },

        //请求成功后回调函数，参数为服务器返回的数据
        success:function(data){
          //将JSON文本转换为JavaScript对象
          var dam = eval("("+ data + ")");
          console.log(data);
          if(dam != null){
            $("#nameError").html(dam.name + "已经存在，请换一个名字！");
          }
        },
        //请求失败时调用的函数
        error:function(){
          alert("处理异常");
        }
      });
    }
  </script>

</head>
<body>
  <form action="${pageContext.request.contextPath}/DoAddDamServlet" method="post">

    水库名：<input class="form-control"  type="text" id="name" onblur="checkNameAjax()" name="name" ><span style="color:#ff0000" id="nameError"></span><br>
    所属河流：<input  class="form-control" type="text" name="river" ><br>
    装机容量（千瓦时）：<input  class="form-control" type="text" name="capacity" ><br>
    建成日期：<input class="form-control"  type="text" name="completeDate" ><br>
    <input class="btn btn-primary" type="submit" value="新增">
  </form>
</body>
</html>
